<template>
  <div class="search-div">
    <el-form label-width="90px" size="small">
      <el-row>
        <el-col :span="22">
          <el-form-item label="订单日期">
            <el-date-picker
              v-model="createTimes"
              type="daterange"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="截止日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="1">
          <el-button type="primary" size="small" @click="fetchData()">
            搜索
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { GetOrderStatisticsData } from '@/api/orderInfo.js'

const chart = ref()
const searchObj = ref({
  createTimeBegin: '',
  createTimeEnd: '',
})
const createTimes = ref([])

onMounted(async () => {
  fetchData()
})

const fetchData = async () => {
  if (createTimes.value.length == 2) {
    searchObj.value.createTimeBegin = createTimes.value[0]
    searchObj.value.createTimeEnd = createTimes.value[1]
  }
  const { data } = await GetOrderStatisticsData(searchObj.value)
  setChartOption(data.dateList, data.amountList)
}

const setChartOption = (dateList, amountList) => {
  const myChart = echarts.init(chart.value)
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '订单金额统计',
    },
    tooltip: {},
    legend: {
      data: ['订单总金额（元）'],
    },
    xAxis: {
      data: dateList,
    },
    yAxis: {},
    series: [
      {
        name: '订单总金额（元）',
        type: 'bar',
        data: amountList,
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
</script>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
